<template>
  <el-descriptions title="采购单详情" :column="4" border>
    <el-descriptions-item label="采购单号" label-align="left" align="center" label-class-name="my-label"
      class-name="my-content">
      {{ poData.id }}
    </el-descriptions-item>
    <el-descriptions-item label="采购日期" label-align="left" align="center">
      {{ poData.poDate }}
    </el-descriptions-item>
    <el-descriptions-item label="总金额" label-align="left" align="center">
      ¥ {{ poData.totalPrice }}
    </el-descriptions-item>
    <el-descriptions-item label="供应商" label-align="left" align="center">
      {{ poData.vendorName }}
    </el-descriptions-item>
    <el-descriptions-item label="备注" label-align="left" span="2">
      {{ poData.brief }}
    </el-descriptions-item>
    <el-descriptions-item label="状态" label-align="left" align="center">
      <el-tag size="small"> {{ poData.statusX }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="操作" label-align="left" align="center">
      <el-button type="success" size="small" v-auth:permission="`PO_APPROVE`" v-if="poData.status==1" @click="submit(10)">通过</el-button>
      <el-button type="warning" size="small" v-auth:permission="`PO_REJECT`" v-if="poData.status==1" @click="submit(40)">拒绝</el-button>
      <el-button type="primary" size="small" v-if="poData.status==10" @click="submit(20)">开始配货</el-button>
      <el-button type="danger" size="small" v-if="poData.status!=120" @click="submit(120)">作废</el-button>
    </el-descriptions-item>
  </el-descriptions>
  <el-table :data="tableData" style="width: 100%">
    <!-- 产品编号列 -->
    <el-table-column fixed prop="productId" label="编号" width="60"></el-table-column>
    <!-- 产品名称列 -->
    <el-table-column fixed prop="productName" label="名称" width="120"></el-table-column>
    
    <!-- 产品数量列 -->
    <el-table-column label="数量" width="60">
      <template #default="scope">
        {{ scope.row.qty }}
      </template>
    </el-table-column>
    <el-table-column label="入库数量" width="150" v-if="poData.status==20">
      <template #default="scope">
        <el-input-number v-model="scope.row.ioQty" size="small" :min="1" />
      </template>
    </el-table-column>
    <el-table-column label="入库备注" width="150" v-if="poData.status==20">
      <template #default="scope">
        <el-input v-model="scope.row.ioBrief" placeholder="输入入库备注" />
      </template>
    </el-table-column>
    <el-table-column label="生产日期" width="150" v-if="poData.status==20">
      <template #default="scope">
        <el-date-picker v-model="scope.row.productionDate" type="date" placeholder="选择日期" size="small" style="width: 120px;"/>
      </template>
    </el-table-column>
    <el-table-column label="保质期" width="150" v-if="poData.status==20">
      <template #default="scope">
        <el-input-number v-model="scope.row.shelfLife" size="small" :min="1" >天
        </el-input-number> 
      </template>
    </el-table-column>
    <el-table-column label="入库货架" width="200" v-if="poData.status == 20">
            <template #default="scope">
                <ShelfTree v-model="scope.row.shelfId"></ShelfTree>
            </template>
        </el-table-column>
    <!-- 产品单价列 -->
    <el-table-column label="单价" width="200">
      <template #default="scope">
        ￥{{ scope.row.price }}
      </template>
    </el-table-column>
    <!-- 产品总价列 -->
    <el-table-column label="总价" width="200">
      <template #default="scope">
        ￥{{ Number(scope.row.price * scope.row.qty).toFixed(2) }}
      </template>
    </el-table-column>
    <!-- 备注列 -->
    <el-table-column label="备注" width="300">
      <template #default="scope">
        {{ scope.row.brief }}
      </template>
    </el-table-column>

  </el-table>
  
  <el-divider border-style="dotted" />
  <div v-if="poData.status==20">
    <el-input v-model="ioFormData.receiver" placeholder="请输入库人"></el-input>
    <el-input v-model="ioFormData.brief" type="textarea" placeholder="输入入库备注" />
    <el-button type="primary" size="small"  @click="inStock">入库</el-button>
  </div>
  
</template>
<script setup lang="ts">
import { ioApi, poApi } from '@/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import ShelfTree from '@/components/ShelfTree.vue';
const router = useRouter()
const route = useRoute()
const poData = reactive<any>({
  id: "",
  vendorName: '',
  status: 0,
  statusX: "",
  totalPrice: 0,
  poDate: '',
  brief: '',
})
const ioFormData = reactive({
  receiver: "",
  brief: "",
})
const inStock = () => {
  let items: any[] = []
  tableData.value.forEach((element: any) => {

    items.push({
      productId: element.productId,
      productName: element.productName,
      qty: element.ioQty,
      shelfId: element.shelfId,
      shelfLife: element.shelfLife,
      productionDate: element.productionDate,
      brief: element.ioBrief
    })
  })
  let params = {
        brief: ioFormData.brief,
        receiver: ioFormData.receiver,
        poId: poData.id,
        items: items
    }
  ioApi.add.call(params).then((res) => {
    ElMessage({
      message: '入库成功',
      type: 'success',
    })
    callApi()
  })
}
const tableData = ref([])
const submit = (status: number) => {
  let title = ""
    switch (status) {
        case 10:
            title = "确定通过吗？"
            break;
        case 40:
            title = "确定拒绝吗？"
            break;
        case 20:
            title = "确定开始配货吗？"
            break;
        case 120:
            title = "确定作废吗？"
            break;
    }
    ElMessageBox.confirm(
        title,
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
      callStatusApi(status)
    });
}
const callStatusApi = (status: number) => {
  poApi.update.call({ id: poData.id, status }).then((res) => {
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
    callApi()
  })
}


onMounted(() => {
  poData.id = route.query.id === undefined ? 0 : (route.query.id)
  callApi();
})
const callApi = () => {
  poApi.select.call({ id: poData.id }).then((res) => {
    res = res[0];
    poData.vendorName = res.vendorName;
    poData.status = res.status;
    poData.totalPrice = res.totalPrice;
    poData.poDate = res.poDate;
    poData.brief = res.brief
    poData.statusX = res.statusX;
  });
  poApi.selectItems.call({ poId: poData.id }).then((res) => {
    tableData.value = res
    console.log(res)
  })

}

</script>
<style scoped>
:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
}

:deep(.my-content) {
  background: var(--el-color-danger-light-9);
}
</style>